<{if $data}>
<div id="switchableMain-<{$widgets_id}>" >
<div id="switchable-<{$widgets_id}>" class="section loading switchable-defau <{$setting.triggersPos}>">
<div class="switchable-triggerImages">
<div style="height:<{$setting.switchable_height}>px;overflow:hidden;width:<{$setting.switchable_width}>px;">
	<ol class="switchableslideWrap" style="height:<{$setting.switchable_height}>px;">
        <{foreach from=$setting.pic item=data key=key}>
        <li class="slideitem switchable-panel" style="<{if $setting.direction=='Left'}> float:left <{/if}>"><a href="<{$data.linktarget}>"><{if $data.link}><img width="<{$setting.switchable_width|default:500}>px" height="<{$setting.switchable_height|default:320}>px"  
		<{if $setting.islazyload eq 'true'}>img-lazyload<{else}>src<{/if}>="<{$data.link}>" /><{/if}></a> </li>
	<{/foreach}>
	</ol>
</div>
</div>
<{if $setting.hasTriggers eq 'true'}>
<ul id="num_nav" class="switchable-triggerBox num_nav">
	<{foreach from=$setting.pic item=data key=key name="item"}>
	<li>
		<a class="switchable-trigger" href="javascript:void(0)" >
			<{$data.linkinfo}>
		</a>
	</li>
  	<{/foreach}>
</ul>
<{/if}>
</div>
</div>
<style>
.switchable-defau {
	 position:relative;
}
.switchable-triggerBox{
	background:#F0F0F0;
}
.switchable-defau .switchable-triggerBox li {
    float:left;
    width:125px;
    height:35px;
    line-height:35px;
    overflow:hidden;
    background-color:<{$setting.triggersBColor|default:'#f0f0f0'}>;
    color:#333;
    text-align:center;
    cursor:pointer;
    opacity:<{$setting.triggersOpacity|default:0.7}>;
}
.switchable-defau .switchable-triggerBox li a {
    color:<{$setting.triggersFColor|default:'#333'}>;
}
.switchable-defau .switchable-triggerBox li.active,.switchable-defau .switchable-triggerBox li.active a {
    width:125px;
    height:35px;
    color:<{$setting.triggersFAColor|default:'#3F5179'}>;
    background-color:<{$setting.triggersBAColor|default:'#D2D6E3'}>;
    opacity:<{$setting.triggersAOpacity|default:0.5}>;
}
.switchable-panel {
	overflow:hidden;
	list-style:none;
	padding:0;
	margin:0;
	line-height:normal;
	border:none;
}

.triggersTop .switchable-triggerImages{
	margin:35px 0 0 0;
    position:absolute;
}
.triggersTop .switchable-triggerBox {
	position:absolute;
	top:0;
	left:0;
}

.triggersRight .switchable-triggerImages{
	float:left;
}

.triggersRight .switchable-triggerBox {
}

.triggersLeft .switchable-triggerImages{
	float:right;
}

.triggersLeft .switchable-triggerBox {
}

.triggers-insideBottom .switchable-triggerImages{
}

.triggers-insideBottom .switchable-triggerBox {
	position:absolute;
	margin-top:-35px;
}
</style>
<script>
            var widget = $('switchable-<{$widgets_id}>');
            var items = $$('.switchable-triggerBox li');

            new Switchable('switchable-<{$widgets_id}>', {
                eventType:"<{$setting.eventType|default:'mouse'}>",           //事件类型
                hasTriggers:<{$setting.hasTriggers|default:true}>,            //是否有触点
                lazyDataType:"img",                    
                autoplay:<{$setting.autoplay|default:true}>,                  //是否自动播放
				circular:<{$setting.around|default:true}>,                    //是否开启循环滚动
                interval:<{$setting.interval|default:1000}>,                  //间隔时间
                pauseOnHover:<{$setting.pauseOnHover|default:true}>,
                islazyload:<{$setting.islazyload|default:false}>,
                effect:"<{$setting.effect|default:'scrollx'}>",
                duration:<{$setting.duration|default:500}>
			});


            if('<{$setting.triggersPos}>' === 'triggersRight' ||'<{$setting.triggersPos}>' === 'triggersLeft' ){
                    widget.setStyle('width',<{$setting.switchable_width}>+125);
                    items.each(function(v){
                        v.setStyles({'height':<{$setting.switchable_height}>/items.length,'line-height':<{$setting.switchable_height}>/items.length}); 
                    });
            }else{
                  widget.setStyle('height',<{$setting.switchable_height}>+35);
                    items.each(function(v){
                        v.setStyles({'width':<{$setting.switchable_width}>/items.length}); 
                    });
            } 
</script>
<{/if}>
